<template>
    <div>
        <card>
            <Row>
                <Button type="primary" icon="md-add" @click="openAdd" style="margin-right: 10px;">新增</Button>
            </Row>
            <!--数据-->
            <el-table stripe border v-loading="tableLoading" :data="tableData" ref="table" style="width: 100%">
                <template slot="empty">暂无数据</template>
                <el-table-column prop="code" label="参数编码"></el-table-column>
                <el-table-column prop="name" label="参数名称"></el-table-column>
                <el-table-column prop="type" label="参数类型">
                    <template slot-scope="scope">
                        <p v-if="scope.row.type == 1" style="color:blue">小区设备类型</p>
                        <p v-if="scope.row.type == 2" style="color:green">物资类别类型</p>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
            <!--新增-->
            <Modal v-model="addVisible">
                <Form :model="adds" ref="adds" label-position="right" :label-width="90" inline>
                    <FormItem label="参数类型">
                        <el-select v-model="adds.type" @change="getParent" clearable placeholder="请选择">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </FormItem>
                    <FormItem label="上级">
                        <el-select v-model="adds.parentId" clearable placeholder="请选择">
                            <el-option
                                v-for="item in parentParameter"
                                :key="item.id"
                                :value="item.id"
                                :label="item.name">
                            </el-option>
                        </el-select>
                    </FormItem>
                    <FormItem label="参数编号">
                        <Input type="text" v-model="adds.code" placeholder="请输入参数编号" class="normal-input" clearable></Input>
                    </FormItem>
                    <FormItem label="参数名称">
                        <Input type="text" v-model="adds.name" placeholder="请输入参数名称" class="normal-input" clearable></Input>
                    </FormItem>
                </Form>
                <div slot="footer">
                    <Button type="text" size="large" @click="onCancel">取消</Button>
                    <Button type="primary" size="large" @click="handleSubmit">确定</Button>
                </div>
            </Modal>
        </card>
    </div>
</template>

<script>
    export default {
        name: "parameter",
        data(){
          return{
              pageNum: 1,
              pageSize: 10,
              pageTotal: 0,

              filters:{},
              adds:{},

              tableData:[],
              parentParameter:[],
              options:[
                  {
                      value:1,
                      label:'小区设备类型',
                  },
                  {
                      value:2,
                      label:'物资类别类型',
                  },
              ],

              tableLoading:false,
              addVisible:false,
          }
        },

        created:function () {
            this.loadData();
        },

        methods:{
            loadData(){
                this.tableLoading=true;
                this.filters.pageNum=this.pageNum;
                this.filters.pageSize=this.pageSize;
                this.postRequest("/api/parameter/loadData",this.filters).then(res=>{
                    this.tableData=res.data.list;
                    this.pageTotal=res.data.total;
                    this.tableLoading=false;
                });
            },
            getParent(){
                let type=this.adds.type;
                if (typeof this.adds.type==='undefined'){
                    type=-9;
                }
                this.getRequest("/api/parameter/parentParameters?type="+type).then(resp=>{
                   if (resp.code==20000){
                       this.parentParameter=resp.data;
                   }
                });
            },
            openAdd(){
                this.getParent();
                this.addVisible=true;
            },
            handleSubmit(){
                this.postRequest("/api/parameter/addParameter",this.adds).then(res=>{
                    if (res.code=20000){
                        this.$message.success("新增成功");
                        this.addVisible=false;
                        this.loadData();
                    }
                });
            },
            onCancel() {
                this.addVisible=false;
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
        }
    }
</script>
